<template>
    <div class="common-layout">
        <el-container>
            <el-header style="background-color: gray; font-size: 22px; height: 120px;">
                智慧城市
            </el-header>
            <el-container>
                <el-aside width="200px" style="background-color: #ccc;">
                    <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
                        default-active="2" text-color="#fff" @open="handleOpen" @close="handleClose" router>
                        <el-sub-menu index="1">
                            <template #title>
                                <el-icon>
                                    <location />
                                </el-icon>
                                <span>基础数据</span>
                            </template>

                            <el-menu-item index="/basicData/adminSetting">管理员设置</el-menu-item>
                            <el-menu-item index="/basicData/gridEmploy">网格人员管理</el-menu-item>
                            <el-menu-item index="/basicData/gridType">网格类型管理</el-menu-item>
                            <el-menu-item index="/basicData/log">日志管理</el-menu-item>

                        </el-sub-menu>
                        <el-sub-menu index="2">
                            <template #title>
                                <el-icon>
                                    <location />
                                </el-icon>
                                <span>网格管理</span>
                            </template>
                            <el-menu-item index="/gridmanage/gridCreateGade">网格创建向导</el-menu-item>
                            <el-menu-item index="levelview">层级设置</el-menu-item>
                            <el-menu-item index="gridCreate">创建网格(物理或逻辑)</el-menu-item>
                            <el-menu-item index="createTeam">创建网格队伍</el-menu-item>
                            <el-menu-item index="loginsystem">登录系统</el-menu-item>
                            <el-menu-item index="/gridmanage/physycalgird">物理网格</el-menu-item>
                            <el-menu-item index="/gridmanage/logicgrid">逻辑网格</el-menu-item>
                            <!-- <el-menu-item index="2-3"></el-menu-item>
            <el-menu-item index="2-4">日志管理</el-menu-item> -->

                        </el-sub-menu>
                        <!-- <el-menu-item index="2">
          <el-icon><icon-menu /></el-icon>
          <span>Navigator Two</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
          <el-icon><document /></el-icon>
          <span>Navigator Three</span>
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon><setting /></el-icon>
          <span>Navigator Four</span>
        </el-menu-item> -->
                    </el-menu>
                </el-aside>
                <el-container>
                    <el-main style="background-color:#eee; height: 780px;">
                        <RouterView />
                    </el-main>
                    <!-- <el-footer>Footer</el-footer> -->
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>

<script lang="ts" setup>
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
</script>